<template>
	<view class="content">
		<view class="chooseRoom">
			<view class="titleword">房屋选择:</view>
			<uni-data-picker placeholder="请选择房屋" style="margin-left: 10px;width: calc(100% - 90px);" @change="pickerChange"
			 v-model="curRoomId" popup-title="请选择房屋" :localdata="roomList">
			</uni-data-picker>
		</view>
		<view class="roleCon">
			<view class="peopleTitle">业主信息</view>
			<view v-for="item in ownerList">
				<view class="peopleMsg">
					<image class="avatar" :src="item.avatar || noPhoto" @click="navTo('/package_isp/pages/family/myInfo')"></image>
					<view style="margin-left: 16upx;" @click="navTo('/package_isp/pages/family/myInfo')">
						<view class="peopleNAndS">
							<view style="font-size: 28upx;">{{item.userName}}</view>
							<view class="state" :class="{'blueBg':item.verifyState == '0',
								'greenBg':item.verifyState == '1',
								'redBg':item.verifyState == '2',
								'grayBg':item.verifyState == undefined || item.verifyState == '3'}">
								{{getStateWord(item.verifyState)}}
							</view>
						</view>
						<view style="line-height: 48upx;font-size: 24upx;color: #666;">{{item.phoneNum}}</view>
					</view>
					<view class="uploadBtn" @click="navTo('/package_isp/pages/face/faceCollection')" v-if="item.isCollection=='0'">
						人脸认证
					</view>
					<view class="uploadBtn" @click="navTo('/package_isp/pages/face/faceCollection')" v-if="item.isCollection=='1'">
						重新认证
					</view>
				</view>
			</view>
		</view>
		<view class="roleCon">
			<view class="peopleTitle">成员信息</view>
			<view v-for="item in memberList">
				<view class="peopleMsg">
					<image class="avatar" :src="item.avatar || noPhoto" @click="navTo('/package_isp/pages/family/myInfo',item)"></image>
					<view style="margin-left: 16upx;" @click="navTo('/package_isp/pages/family/myInfo',item)">
						<view class="peopleNAndS">
							<view style="font-size: 28upx;">{{item.userName}}</view>
							<view class="state" :class="{'blueBg':item.verifyState == '0',
								'greenBg':item.verifyState == '1',
								'redBg':item.verifyState == '2',
								'grayBg':item.verifyState == undefined || '3'}">
								{{getStateWord(item.verifyState)}}
							</view>
						</view>
						<view style="line-height: 48upx;font-size: 24upx;color: #666;">{{item.phoneNum}}</view>
					</view>
					<view class="uploadBtn" @click="navTo('/package_isp/pages/face/faceCollection')" v-if="item.isCollection=='1000'">
						人脸认证
					</view>
					<view class="uploadBtn" @click="navTo('/package_isp/pages/face/faceCollection')" v-if="item.isCollection=='2000'">
						重新认证
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noPhoto: '/static/image/face/people.png',
				areaCode: this.$api.util.getAreaCode(),
				userId: "",
				ownerList: [],
				memberList: [],
				roomList: [],
				curRoomId: "",
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.userId = userInfo.userUuid
			}
			this.inquiryCurRooms();
		},
		methods: {
			getStateWord(state) {
				if (state == '0') {
					return '待审核';
				} else if (state == '1') {
					return '已认证';
				} else if (state == '2') {
					return '已拒绝';
				} else {
					return '未认证'
				}
			},
			//跳转到采集页面
			navTo(url, item) {
				uni.navigateTo({
					url: url + '?id=' + item.id
				})
			},
			//选择房屋
			pickerChange(e) {
				this.curRoomId = e.detail.value[0].value;
				this.ownerList = [];
				this.memberList = [];
				this.inquiryPersonsOfRoom(this.curRoomId);
			},

			/**
			 * 根据小区id和当前人员id,查询可切换的房屋列表
			 * **/
			inquiryCurRooms() {
				this.roomList = [];
				let params = {
					"userId": this.userId
				}
				this.$api.request.queryRoomInfoByUserId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						let dataList = res.body.data.list
						for (let i = 0; i < dataList.length; i++) {
							let item = {
								value: dataList[i].roomId,
								text: dataList[i].buildingNum + "栋" + dataList[i].unitName + "单元" + dataList[i].roomNum + "号"
							}
							this.roomList.push(item)
						}
						if (this.roomList.length > 0) {
							this.curRoomId = this.roomList[0].value
							this.inquiryPersonsOfRoom(this.curRoomId)
						}
					}
				})
			},

			//根据房屋id查当前房屋人员
			inquiryPersonsOfRoom(roomId) {
				let params = {};
				params.roomId = roomId;
				params.page = 1;
				params.rows = 100;
				this.$api.request.queryUserOfRoom(params, res => {
					if (res.body.status.statusCode === '0') {
						let dataList = res.body.data.list;
						for (let i = 0; i < dataList.length; i++) {
							let item = {
								id: dataList[i].memberId,
								avatar: dataList[i].profile,
								userName: dataList[i].name,
								phoneNum: dataList[i].telNo,
								isCollection: dataList[i].state
							}
							if (dataList[i].ownerTypeCd == "1002") {
								this.memberList.push(item)
							} else if (dataList[i].ownerTypeCd == "1001") {
								this.ownerList.push(item)
							}
						}
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		position: relative;
		background: #f8f8f8;
	}

	.content {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.chooseRoom {
		width: calc(100% - 40upx);
		margin: 20upx;
		color: #000000;
		font-size: 18px;
		font-weight: bold;
		display: flex;
		flex-direction: row;
	}

	.titleword {
		width: 80px;
		height: 40px;
		line-height: 40px;
	}

	.roominfo {
		background-color: #00BFFF;
		color: #ffffff;
		border-radius: 8px;
		margin: 20upx;
		font-size: 12px;
		padding: 30upx;
	}

	.roomitem {
		padding: 10px 0;
	}

	.roleCon {
		background-color: #ffffff;
		border-radius: 8px;
		margin: 20upx;
		font-size: 12px;
		padding: 30upx;
	}

	.peopleTitle {
		font-size: 32upx;
		font-weight: bold;
	}

	.peopleMsg {
		display: flex;
		justify-content: left;
		align-items: center;
		margin-top: 40upx;
	}

	.avatar {
		height: 96upx;
		width: 96upx;
		border-radius: 16upx;
	}

	.peopleNAndS {
		display: flex;
		justify-content: left;
		align-items: center;
		height: 48upx;
	}

	.state {
		font-size: 20upx;
		margin-left: 32upx;
		width: 100upx;
		height: 36upx;
		text-align: center;
		border-radius: 32upx;
		vertical-align: middle;
		line-height: 36upx;
		color: #ffffff;
	}

	.uploadBtn {
		margin-left: auto;
		width: 144upx;
		height: 60upx;
		border: 1px solid #00BFFF;
		color: #00BFFF;
		border-radius: 64upx;
		line-height: 60upx;
		text-align: center;
		font-size: 24upx;
	}

	.greenBg {
		background-color: #00AA00;
	}

	.blueBg {
		background-color: #00BFFF;
	}

	.redBg {
		background-color: #FF0000;
	}

	.grayBg {
		background-color: #999999;
	}
</style>
